<template >
  <div class="title_box">
    <span class="title">字典类型</span>
    <div class="icon_box" v-if="!informationStore.isShowInformationTypeCard">
      <div class="item_icon" @click="informationStore.addInformationTypeClick">
        <icon-plus size="18" />
      </div>
      <div class="item_icon" @click="informationStore.resetTypeClick">
        <icon-sync size="18" />
      </div>
    </div>
  </div>
  <div class="search_box">
    <a-input
      :style="{ width: '246px' }"
      size="small"
      placeholder="请输入关键字"
      v-model="informationStore.typeListSearchKeyword"
      allow-clear
      @input="informationStore.typeSearchInput"
      @clear="informationStore.typeSearchInputClear"
    />
  </div>
  <div class="type_list_box">
    <a-scrollbar style="height: 700px; overflow: scroll">
      <a-menu :style="{ width: '236px', height: '100%' }" :default-open-keys="['0']" :default-selected-keys="['0_2']">
        <a-sub-menu key="0">
          <a-menu-item
            v-for="its in informationStore.$state.typeShowList"
            :key="its.id"
            @click="informationStore.typeItemClick(its)"
            >{{ its.dictTypeName }}</a-menu-item
          >
        </a-sub-menu>
      </a-menu>
    </a-scrollbar>

    <!-- 添加字典类型的弹窗 -->

    <a-modal
      v-model:visible="informationStore.isShowAddInformationTypeModal"
      @ok="addInformationTypeOkClick"
      @cancel="addInformationTypeCancelClick"
    >
      <template #title> 添加字典类型 </template>
      <div class="addInformationModalBox">
        <a-form :model="informationStore.$state.addInformationTypeForm" :style="{ width: '480px' }">
          <a-form-item label="字典类型名称">
            <a-input
              v-model="informationStore.addInformationTypeForm.dictTypeName"
              placeholder="请输入字典类型名称"
              allow-clear
            />
          </a-form-item>
          <a-form-item label="字典类型描述">
            <a-textarea
              v-model="informationStore.addInformationTypeForm.dictDesc"
              placeholder="请输入字典类型描述"
              allow-clear
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'Type'
})
</script>
<script lang="ts" setup>
// 引入
import { useInformationStore } from '@/store'
const informationStore = useInformationStore()

// 初始化
onMounted(() => {
  informationStore.getTypeListFunc()
})

// 字典类型弹窗的确定点击事件
const addInformationTypeOkClick = () => {
  informationStore.addInformationFunc()
  informationStore.isShowAddInformationTypeModal = false
}
// 字典类型弹窗的取消点击事件
const addInformationTypeCancelClick = () => {
  informationStore.isShowAddInformationTypeModal = false
}
</script>

<style  scoped>
.title {
  font-size: 16px;
  line-height: 30px;
  display: flex;
  flex-direction: row;
}

.title_box {
  position: relative;
}

.icon_box {
  position: absolute;
  display: flex;
  top: 0px;
  right: 10px;
  width: 50px;
  flex-direction: row;
  justify-content: space-between;
}

.icon_box i {
  font-size: 16px;
}

.item_icon {
  cursor: pointer;
  padding: 6px;
}

.item_icon:hover {
  background: #f5f7fd;
  transition: 0.3s;
  border-radius: 10px;
}

.search_box {
  margin-top: 15px;
}

.arco-menu-item {
  height: 30px;
  line-height: 30px;
}

.type_list_box {
  overflow: scroll;
  margin-top: 10px;
  width: 246px;
}

::v-deep .arco-menu-inner {
  padding: 0px;
}

::v-deep .arco-menu-item {
  background: #f2f3f5;
  border-radius: 4px;
}

::v-deep .arco-card-body {
  overflow: scroll;
}

::v-deep .type_list_box .arco-menu-selected {
  color: white;
  background: #4366d4 !important;
}

.addInformationModalBox {
  padding: 50px 0px;
  height: 120px;
}
</style>